import React, { Component } from 'react'

export default class Chat extends Component {
  //声明状态
  state = {
    //input 的值状态
    // msg: '',
    //文本框中的内容
    data: [
      'aaa',
      'bbb',
      'ccc'
    ]
  }
  //声明事件回调
  send = () => {
    //获取 input 框中值
    let v = this.input.value;
    //更新状态  push 的返回结果
    this.setState({
      data: [...this.state.data, v]
    })
  }

  render() {
    //解构赋值
    let {data} = this.state;
    return (
      <div>
        <input type="text" ref={el => this.input = el} /><button onClick={this.send}>发送</button>
        <hr />
        <div ref={el => this.div = el} style={{width: 400, height: 300, border: 'solid 1px #777', overflowY: 'scroll'}}>
          <ul>
            {
              data.map((item, index) => {
                return <li key={index}>{item}</li>;
              })
            }
          </ul>
        </div>
      </div>
    )
  }

  //组件更新完成的回调
  componentDidUpdate(){
    //操作真实 DOM
    this.div.scrollTop = this.div.scrollHeight;
    //这里是否可以更新状态???
    // this.setState({
    //   data: ['axxx']
    // })
  }
}
